<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>动物交换卡</title>
	<link rel="stylesheet" href="styles.css">
</head>

<body>
	<div class="out-box">
		<!-- 
			接下来，打开 card.html 并将占位符图片和信息替换为你最喜欢动物的图片和信息。在图片选择上，你需要使用 width 为 300 像素的图片。如果你的图片原始大小更大，你可以在 CSS 中将图片的宽度设置为 300 像素， 但是要注意，你的图片最终可能会压缩或失真。在之后的课程中，我们会讨论如何使用响应式图片来解决这个问题。 当然，不要忘记将图片的 alt 属性更改为动物的名称。所以，alt="name-of-your-animal" 应替换为动物的实际名称。
			一旦添加完你最喜欢的动物的图片和信息后，将正确的 CSS 添加到 styles.css， 参考步骤 4 中的样式规则，来创建出和 design-prototype.png 一样的动物卡片网页。你将需要修改 card.html， 包括 attributes， 并使用 selectors 来指定你想要使用的元素。而且，确保链接到 card.html 中的样式表， 否则你的 CSS 将不会应用到你的网页。
			CSS 应该应用这些样式，来匹配设计原型：

			将关于动物有趣的事实的文本排成斜体
			加粗动物列表项（例如 Habitat）的标记
			动物的列表项没有点
			围绕动物的名称、图片和信息加边框
			围绕动物的信息加边框
			动物的名称、图片和信息之间保留一定间距（你将需要使用“内边距（padding）”属性）
		-->
		<!-- 在下面输入你最喜欢的动物（或者其他...）的名字 -->
		
		<h3>竹鼠</h3>
		<!-- 在下面输入你最喜欢的动物的图片 -->
		<div class="content">
			<img src="rabbit.jpg" alt="竹鼠">
			<div class="text-content">
				<!-- 在下面输入你最喜欢的动物的一些趣味小知识 -->
				<p class="ptitle">写出你最喜欢的动物的一些趣味小知识</p>
				<ul>
					<!-- 在下面输入你最喜欢的动物的信息列表 -->
					<li><span class="li-title">脆弱</span>: 竹鼠可容易中暑啦, 夏天要记得开空调哟</li>
					<li><span class="li-title">打架</span>: 不要把竹鼠群养, 它们打起架来会把对方的尾巴咬掉</li>
					<li><span class="li-title">牙齿</span>: 竹鼠的牙齿可尖利了, 可以咬断竹子</li>
					<li><span class="li-title">跑的慢</span>: 别看是老鼠, 缺乏运动神经</li>
				</ul>
				<!-- 在下面输入你最喜欢的动物的具体描述 -->
				<p class="pcontent">竹鼠喜欢吃, 一天要吃3毛钱, 所以养大了以后一定记得把它卖掉, 自己宰了吃还是不忍心...</p>
			</div>
		</div>
	</div>
</body>

</html>